<template>
  <el-card :body-style="{'text-align':'center',padding: '20px 30px' }" shadow="hover">
    <div slot="header" class="clearfix">
      <span>{{title}}</span>
      <el-button v-waves @click="refresh()" style="float: right; padding: 3px 0" type="text">刷新</el-button>
    </div>
    <div v-if="!error" name>
      <slot name="data"></slot>
    </div>
    <div v-else>
      <slot name="error">
        提示：{{ error.message || '出错啦'}}
        <el-button @click="refresh()" v-if="error.status!==403" type="text">刷新重试</el-button>
      </slot>
    </div>
  </el-card>
</template>

<script>
import waves from '@/directive/waves' // 水波纹指令
export default {
  directives: {
    waves
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    /**
     * 标题
     */
    title: {
      type: String,
      default: ''
    },
    /**
     * 获取数据方法
     * */
    apiFunc: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      data: null,
      error: null
    }
  },
  methods: {
    refresh () {
      this.error = null
      this.apiFunc()
        .then(res => {
          this.data = res.data
          this.$emit('change', this.data)
        })
        .catch(error => {
          this.error = error
        })
    }
  },
  created () {
    this.refresh()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
